<template>
  <div class="form">
    <el-form :model="ruleForm" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-form-item label="分类名称">
        <el-input v-model="ruleForm.name" prop="name"></el-input>
      </el-form-item>
      <el-form-item label="上级分类" prop="parentId">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域" @change="select">
          <el-option v-for="item in sort" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量单位" prop="productUnit" required>
        <el-input v-model="ruleForm.productUnit"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="ruleForm.sort"></el-input>
      </el-form-item>
      <el-form-item label="是否显示" prop="type">
        <el-radio-group v-model="ruleForm.showStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否显示在导航栏" prop="resource">
        <el-radio-group v-model="ruleForm.navStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="分类图标" prop="excelFile">
        <el-upload :action="uploadUrl()">
          <el-button type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip" style="color:red">只能上传jpg/png文件，且不超过10MB</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="筛选属性">
        <el-cascader :options="attribute" :props="SetKesDept" @change="handleChange"></el-cascader>
        <el-button>删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addDomain()">新增</el-button>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input v-model="ruleForm.keywords"></el-input>
      </el-form-item>
      <el-form-item label="分类描述">
        <el-input v-model="ruleForm.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style>
.form {
  width: 800px;
  border: 1px solid #ebeef5;
  margin: 0px auto;
}
.el-input {
  width: 500px;
}
.el-form-item {
  margin-bottom: 22px;
  margin-top: 22px;
}
</style>

<script>
export default {
  data() {
    return {
      value: [],
      sort: [],
      attribute: [],
      SetKesDept: {
        value: "id",
        label: "name",
        children: "productAttributeList"
      },

      ruleForm: {
        region: "无上级分类",
        description: null,
        icon: null,
        keywords: null,
        name: null,
        navStatus: null,
        parentId: 0,
        productAttributeIdList: [],
        productUnit: null,
        showStatus: null,
        sort: null,
        id: null,
        level: null,
        productCount: null
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 2, max: 12, message: "长度在 2 到 12 个字符", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    select(data) {
      this.ruleForm.parentId = data;
    },
    submitForm() {
      var that = this;
      this.$confirm("是否提交数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log(that.ruleForm.description);
        })
        .then(() => {
          this.$axios
            .post("/productCategory/update/" + that.ruleForm.id, {
              description: that.ruleForm.description,
              icon: null,
              id: that.ruleForm.id,
              keywords: that.ruleForm.keywords,
              level: that.ruleForm.level,
              name: that.ruleForm.name,
              navStatus: that.ruleForm.navStatus,
              parentId: that.ruleForm.parentId,
              productAttributeIdList: that.productAttributeIdList,
              productCount: that.ruleForm.productCount,
              productUnit: that.ruleForm.productUnit,
              showStatus: that.ruleForm.showStatus,
              sort: that.ruleForm.sort
            })
            .then(function(ret) {
              that.$router.push("/ProductClassify");
              that.$message({
                type: "success",
                message: "修改成功!"
              });
            });
        })

        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消提交"
          });
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    uploadUrl: function() {
      return "http://172.16.82.63:8080/uploadPath";
    },
    show() {
      var data = this.$route.params.element;
      var form = this.ruleForm;
      form.sort = data.sort;
      form.showStatus = data.showStatus;
      form.productUnit = data.productUnit;
      form.parentId = data.parentId;
      form.navStatus = data.navStatus;
      form.name = data.name;
      form.keywords = data.keywords;
      form.icon = data.icon;
      form.description = data.description;
      form.id = data.id;
      form.level = data.level;
      form.productCount = data.productCount;

      this.$axios.get("/productAttribute/category/list/withAttr").then(ret => {
        var that = this;
        var datalist = ret.data.data;

        that.attribute = datalist;
      });

      this.$axios.get("/productCategory/list/withChildren").then(ret => {
        var that = this;
        that.sort = ret.data.data;
      });
    },
    handleChange(value) {
      console.log(value);
    }
  },
  mounted() {
    this.show();
  }
};
</script>